<template>
    <div>
        <div v-if="ReplyDetail">
            <div class="nav">
                评论详情
                <span class="iconfont icon-fanhui" @click.stop="back()"></span>
            </div>
            <div class="replay_detail" v-if="ReplyDetail.member">
                <van-image
                    class="img"
                    width="35px"
                    height="35px"
                    radius="50%"
                    :src="ReplyDetail.member.avatar"
                ></van-image>
                <div class="user_message">
                    <div>
                        <h3>{{ ReplyDetail.member.uname }}</h3>
                        <p>
                            <span>#{{ ReplyDetail.floor }}</span
                            >{{ ReplyDetail.ctime | fornatTime }}
                        </p>

                        <div class="message">
                            <div
                                v-for="(msg, i) in ReplyDetail.content.message.split('\n')"
                                :key="i"
                            >
                                <div v-html="msg"></div>
                            </div>
                        </div>
                        <div class="icon">
                            <div class="like" @click.stop="firstLike(ReplyDetail.like)">
                                <img v-if="!islike" src="../assets/images/like.png" alt="" />
                                <img v-else src="../assets/images/likeblue.png" alt="" />
                                {{ ReplyDetail.like > 0 ? ReplyDetail.like : "" }}
                            </div>
                            <div class="unlike" @click.stop="firstUnlike(ReplyDetail.like)">
                                <img v-if="!isunlike" src="../assets/images/unlike.png" alt="" />
                                <img v-else src="../assets/images/unlikebule.png" alt="" />
                            </div>
                            <div class="share">
                                <img src="../assets/images/share.png" alt="" />
                            </div>
                            <div class="msg">
                                <img src="../assets/images/msg.png" alt="" />
                                {{ ReplyDetail.rcount > 0 ? ReplyDetail.rcount : "" }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="replay_detail_info" v-if="ReplyDetail.replies">
                <h3>{{ ReplyDetail.reply_control.sub_reply_title_text }}</h3>
                <div class="replay_detail" v-for="(item, index) in replies" :key="index">
                    <van-image
                        class="img"
                        width="35px"
                        height="35px"
                        radius="50%"
                        :src="item.member.avatar"
                    ></van-image>
                    <div class="user_message">
                        <div>
                            <h3>{{ item.member.uname }}</h3>
                            <p>
                                <span>#{{ item.floor }}</span
                                >{{ item.ctime | fornatTime }}
                            </p>

                            <div class="message">
                                <div v-for="(msg, i) in item.content.message.split('\n')" :key="i">
                                    <div v-html="msg"></div>
                                </div>
                            </div>
                            <div class="icon">
                                <div class="like" @click.stop="like(index)">
                                    <img
                                        v-if="!item.islike"
                                        src="../assets/images/like.png"
                                        alt=""
                                    />
                                    <img v-else src="../assets/images/likeblue.png" alt="" />
                                    {{ item.like > 0 ? item.like : "" }}
                                </div>
                                <div class="unlike" @click.stop="unlike(index)">
                                    <img
                                        v-if="!item.isunlike"
                                        src="../assets/images/unlike.png"
                                        alt=""
                                    />
                                    <img v-else src="../assets/images/unlikebule.png" alt="" />
                                </div>
                                <div class="share">
                                    <img src="../assets/images/share.png" alt="" />
                                </div>
                                <div class="msg">
                                    <img src="../assets/images/msg.png" alt="" />
                                    {{ item.rcount > 0 ? item.rcount : "" }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="loading" v-if="loading">
            <van-loading size="24px" vertical text-color="#0094ff" color="#0094ff"
                >加载中...</van-loading
            >
        </div>
    </div>
</template>

<script>
import _ from "lodash";
export default {
    props: ["rootId"],
    data() {
        return {
            ReplyDetail: [],
            replies: [],
            islike: false,
            isunlike: false,
            loading: true,
            next: 0,
        };
    },
    created() {
        this.getReplyDetail();
    },
    mounted() {
        window.addEventListener("scroll", this.windowScroll);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.windowScroll);
    },
    methods: {
        back() {
            history.back();
        },
        async getReplyDetail() {
            await this.axios
                .get(`ReplyDetail?oid=30640&root=${this.rootId}&next=${this.next}&ps=20`)
                .then((res) => {
                    this.ReplyDetail = res.root;
                    this.replies = this.replies.concat(res.root.replies);
                    this.next = res.cursor.next;

                    let str = /\[.+\]/;
                    let reg = new RegExp(str, "g");

                    if (this.replies.length <= 0) {
                        return;
                    } else {
                        this.replies.forEach((v) => {
                            this.$set(v, "islike", false);
                            this.$set(v, "isunlike", false);
                            if (v.content.emote) {
                                if (!v.content.message.match(reg)) {
                                    return;
                                }
                                let start = v.content.message.match(reg)[0].indexOf("[");
                                let end = v.content.message.match(reg)[0].indexOf("]") + 1;
                                let em = v.content.message.match(reg)[0].slice(start, end);
                                v.content.message = v.content.message.replaceAll(
                                    reg,
                                    `<img style='width:25px;height:25px' src='${v.content.emote[em].url}' />`
                                );
                            }
                            let start1 = v.content.message.indexOf("@");
                            let end1 = v.content.message.indexOf(":");
                            if (start1 !== -1 && end1 !== -1) {
                                let str1 = v.content.message.slice(start1, end1);
                                v.content.message = v.content.message.replaceAll(
                                    str1,
                                    `<span style='color:#49b4fc'>${str1}</span>`
                                );
                            }
                        });
                    }
                    this.loading = false;
                });
        },
        firstLike(value) {
            if (!this.islike) {
                this.ReplyDetail.like = value + 1;
                this.islike = true;
            } else {
                this.ReplyDetail.like = value - 1;
                this.islike = false;
            }
            this.isunlike = false;
        },
        firstUnlike(value) {
            if (this.islike) {
                this.ReplyDetail.like = value - 1;
                this.islike = false;
            }
            this.isunlike = !this.isunlike;
        },
        like(e) {
            this.replies[e].islike = !this.replies[e].islike;
            this.replies[e].isunlike = false;
            if (this.replies[e].islike) {
                this.replies[e].like = this.replies[e].like + 1;
            } else {
                this.replies[e].like = this.replies[e].like - 1;
            }
        },
        unlike(e) {
            this.replies[e].isunlike = !this.replies[e].isunlike;
            if (this.replies[e].islike) {
                this.replies[e].like = this.replies[e].like - 1;
                this.replies[e].islike = false;
                return;
            }
        },

        loadmore() {
            this.getReplyDetail();
            this.loading = true;
        },
        windowScroll: _.throttle(function () {
            //卷去的距离
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

            scrollTop = Math.ceil(scrollTop);
            //页面的高度
            let contentHight = document.body.scrollHeight;
            //窗口内容的高度
            let clientHeight = window.innerHeight;
            if (scrollTop + clientHeight >= contentHight - 1) {
                this.loadmore();
            }
        }, 1000),
    },
    filters: {
        fornatTime(value) {
            let d = new Date(value * 1000);
            let year = d.getFullYear();
            let month = d.getMonth() + 1;
            let day = d.getDate();
            let time = year + "-" + month + "-" + day;
            return time;
        },
    },
};
</script>

<style lang="scss" scoped>
.nav {
    text-align: center;
    position: relative;
    font-size: 16px;
    line-height: 45px;
    border-bottom: 1px solid #ebecee;
    span {
        position: absolute;
        left: 12px;
        top: 0;
        bottom: 0;
    }
}
.replay_detail {
    display: flex;
    padding: 15px 0;

    .img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-left: 15px;
    }
    .user_message {
        flex: 1;
        padding-left: 15px;
        font-size: 12px;
        overflow: hidden;
        p {
            color: #999;
            span {
                margin-right: 10px;
            }
        }
        h3 {
            color: #999;
        }

        .messages {
            margin-top: 20px;
            font-size: 15px;
            color: #000;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: 6;
        }
        .message {
            margin-top: 20px;
            font-size: 15px;
            color: #000;
        }
        .more {
            color: #49b4fc;
            font-size: 16px;
        }
        .icon {
            display: flex;
            color: #999;
            padding: 15px 0;
            img {
                width: 16px;
                height: 16px;
                vertical-align: middle;
            }
            .like {
                img {
                    padding-right: 3px;
                }
                padding-right: 20px;
            }
            .unlike {
                img {
                }
                padding-right: 20px;
            }
            .share {
                img {
                }
                padding-right: 20px;
            }
            .msg {
                img {
                }
                padding-right: 20px;
            }
        }

        .reply_info {
            padding-top: 20px;
            background: #f4f5f7;
            overflow: hidden;
            .reply {
                padding: 0 20px 0 10px;
                margin-bottom: 10px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                span {
                    color: #49b4fc;
                    padding-right: 5px;
                }
                b {
                    color: #999;
                    font-weight: normal;
                }
            }
            .moreReply {
                color: #49b4fc;
                padding: 0 20px 10px 10px;
                span {
                    font-family: "宋体";
                }
            }
        }
    }
}

.replay_detail_info {
    background: #eee;
    padding-top: 8px;
    h3 {
        padding-left: 15px;
        padding-top: 10px;
        background: #fff;
        color: #999;
    }
    .replay_detail {
        display: flex;
        padding: 15px 0;
        border-bottom: 1px solid #ebecee;
        background: #fff;

        .img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            margin-left: 15px;
        }
        .user_message {
            flex: 1;
            padding-left: 15px;
            font-size: 12px;
            overflow: hidden;
            p {
                color: #999;
                span {
                    margin-right: 10px;
                }
            }
            h3 {
                padding: 0;
                color: #999;
            }
            .message {
                margin-top: 20px;
                font-size: 15px;
                color: #000;
                width: 80vw;
                overflow: hidden;
            }
            .more {
                color: #49b4fc;
                font-size: 16px;
            }
            .icon {
                display: flex;
                color: #999;
                padding: 15px 0;
                img {
                    width: 16px;
                    height: 16px;
                    vertical-align: middle;
                }
                .like {
                    img {
                        padding-right: 3px;
                    }
                    padding-right: 20px;
                }
                .unlike {
                    img {
                    }
                    padding-right: 20px;
                }
                .share {
                    img {
                    }
                    padding-right: 20px;
                }
                .msg {
                    img {
                    }
                    padding-right: 20px;
                }
            }

            .reply_info {
                padding-top: 20px;
                background: #f4f5f7;
                overflow: hidden;
                .reply {
                    padding: 0 20px 0 10px;
                    margin-bottom: 10px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    span {
                        color: #49b4fc;
                        padding-right: 5px;
                    }
                    b {
                        color: #999;
                        font-weight: normal;
                    }
                }
                .moreReply {
                    color: #49b4fc;
                    padding: 0 20px 10px 10px;
                    span {
                        font-family: "宋体";
                    }
                }
            }
        }
    }
}
</style>
